<!DOCTYPE html>
<html lang="en">
	<head>
		<include file="Public/public_head" title="" keywords="{$Think.config.WEB_KEYWORDS}" description="{$Think.config.WEB_DESCRIPTION}"/>
		<meta name="baidu-site-verification" content="t6J1Fd03tP" />
	</head>
	<body>
		<include file="Public/public_nav"/>
		<div class="b-h-70"></div>
		<div id="b-content" class="container">
			<div class="row">
				<div>
					<!-- <div>请设置午休时间</div>
					<div>
						<select name="noomHour">
							<option value="08">08</option>
							<option value="09">09</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>
						:
						<select name="noomMin">
							<option value="00">00</option>
							<option value="15">15</option>
							<option value="30">30</option>
							<option value="45">45</option>
						</select>
					</div> -->
					<div>请设置下班时间</div>
					<div>
						<select name="nightHour">
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
						</select>
						:
						<select name="nightMin">
							<option value="00">00</option>
							<option value="15">15</option>
							<option value="30">30</option>
							<option value="45">45</option>
						</select>
					</div>
					<div>
						<button onclick="setTime();">确定</button>
						<button onclick="cancelSet();">重置</button>
					</div>
				</div>
				<div>
					<!-- <div>距离午休还剩:
						<span></span>:<span></span>:<span></span>
					</div> -->
					<div>距离下班还剩:
						<span id="timer-hour"></span>:
						<span id="timer-minutes"></span>:
						<span id="timer-seconds"></span>
					</div>
					<div>
						<span id="timer-tip" style="color:red;"></span>
					</div>
				</div>
			</div>
			<div class="row">
				<include file="Public/public_foot"/>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script type="text/javascript">
			var timer,endTime;
			function setTime() {
				//获取午休时间
				// var noomHour = $("select[name='noomHour']").val();
				// var noomMin  = $("select[name='noomMin']").val();
				//获取下班时间
				var nightHour = $("select[name='nightHour']").val();
				var nightMin  = $("select[name='nightMin']").val();

				var nowTime = new Date();
				//获取当前时间
				var nowYear    = nowTime.getFullYear();
				var nowMonth   = nowTime.getMonth()*1+1;
				var nowDay     = nowTime.getDate();
				var nowHour    = nowTime.getHours();
				var nowMinutes = nowTime.getMinutes();
				var nowSeconds = nowTime.getSeconds();

				//把时间转成数字类型,便于计算
				// noomHour  = noomHour * 1;
				nightHour = nightHour * 1;
				// noomMin   = noomMin * 1;
				nightMin  = nightMin * 1;
				
				if (nightMin > 60 || nightMin < 0) {
					alert("请设置正确的时间!");
					return;
				}

				if (nightHour > 24 || nightHour < 13) {
					alert("请设置正确的下班时间!");
					return;
				}

				//计算时间
				if (nowHour > nightHour) {
					//已经下班
					$("#timer-hour").html("00");
					$("#timer-minutes").html("00");
					$("#timer-seconds").html("00");
					$("#timer-tip").html("已经下班啦");
				} else {
					endTime = nowYear+"/"+nowMonth+"/"+nowDay+" "+nightHour+":"+nightMin+":00";
					timer  = setInterval("intervalTime()",1000);
				}
			}

			function intervalTime(){

				var time  = new Date();
				var date1 = Date.parse(new Date(time));//开始时间
		        var date2 = Date.parse(endTime);//结束时间
		        var date3 = date2 - date1;  //时间差的毫秒数

				if (date3 <= 0) {
					//已经下班
					$("#timer-hour").html("00");
					$("#timer-minutes").html("00");
					$("#timer-seconds").html("00");
					$("#timer-tip").html("已经下班啦");
					clearInterval(timer);
					return;
				}

		        //计算出相差天数
		        var days = Math.floor(date3 / (24 * 3600 * 1000));
		        //计算出小时数

		        var leave1 = date3 % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
		        var hours = Math.floor(leave1 / (3600 * 1000));
		        //计算相差分钟数
		        var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
		        var minutes = Math.floor(leave2 / (60 * 1000));

		        //计算相差秒数

		        var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
		        var seconds = Math.round(leave3 / 1000);
				$("#timer-hour").html(Appendzero(hours));
				$("#timer-minutes").html(Appendzero(minutes));
				$("#timer-seconds").html(Appendzero(seconds));
				$("#timer-tip").html("下班记得打卡哦~");
		      }

			function Appendzero(obj){
                if(obj<10) return "0" +""+ obj;
                else return obj;
            }
		</script>
	</body>

</html>